<template>
	<div class="modular">		
		<!-- 抑郁 -->
		<div id="screenshot">
			<span class="title">中医体质评估报告</span>
			<table>
				<tr>
					<td>体质</td>
					<template v-if="info.oldAppMentalHealthAssessmentEntityRes">
						<td>
							<view>{{info.oldAppMentalHealthAssessmentEntityRes && info.oldAppMentalHealthAssessmentEntityRes.fillFormDate || '日期'}}</view>
							<view>
								<text>转化分</text>
								<text>判定</text>
								<text>排序</text>
							</view>
						</td>
						<td>
							<view>{{info.fillFormDate}}</view>
							<view>
								<text>转化分</text>
								<text>判定</text>
								<text>排序</text>
							</view>
						</td>
					</template>
					<template v-else>
						<td>
							<view>{{info.fillFormDate}}</view>
							<view>
								<text>转化分</text>
								<text>判定</text>
								<text>排序</text>
							</view>
						</td>
						<td>
							<view>{{info.oldAppMentalHealthAssessmentEntityRes && info.oldAppMentalHealthAssessmentEntityRes.fillFormDate || '日期'}}</view>
							<view>
								<text>转化分</text>
								<text>判定</text>
								<text>排序</text>
							</view>
						</td>
					</template>
					<td>变化趋势</td>
				</tr>
				<tr v-for="(item,index) in info.appPhysiqueScoreVos" :key="index">
					<td>{{item.typeName}}</td>
					<template v-if="!info.oldAppMentalHealthAssessmentEntityRes">
						<td>
							<view>
								<text>{{item.score}}</text>
								<text :class="item.result == '是'?'red':item.result == '倾向是'?'orange':''">{{item.result}}</text>
								<text>{{item.sort}}</text>
							</view>
						</td>
						<td>
							<view>
								<text></text>
								<text></text>
								<text></text>
							</view>
						</td>
					</template>
					<template v-else>
						<td>
							<view>
								<text>{{item.oldPhysiqueScoreVo && item.oldPhysiqueScoreVo.score}}</text>
								<text :class="item.oldPhysiqueScoreVo && item.oldPhysiqueScoreVo.result == '是'?'red':item.oldPhysiqueScoreVo && item.oldPhysiqueScoreVo.result == '倾向是'?'orange':''">{{item.oldPhysiqueScoreVo && item.oldPhysiqueScoreVo.result}}</text>
								<text>{{item.oldPhysiqueScoreVo && item.oldPhysiqueScoreVo.sort}}</text>
							</view>
						</td>
						<td>
							<view>
								<text>{{item.score}}</text>
								<text :class="item.result == '是'?'red':item.result == '倾向是'?'orange':''">{{item.result}}</text>
								<text>{{item.sort}}</text>
							</view>
						</td>
					</template>
					<td>{{info.oldAppMentalHealthAssessmentEntityRes?item.trend:''}}</td>
				</tr>
				<tr>
					<template v-if="!info.oldAppMentalHealthAssessmentEntityRes">
						<td>评估</td>
						<td style="font-size: 18px;">{{info.trendList && info.trendList.assessment && info.trendList.assessment[0]}}</td>
						<td style="font-size: 18px;">{{info.trendList && info.trendList.assessment && info.trendList.assessment[1]}}</td>
						<td></td>
					</template>
					<template v-else>
						<td>评估</td>
						<td style="font-size: 18px;">{{info.trendList && info.trendList.assessment && info.trendList.assessment[1]}}</td>
						<td style="font-size: 18px;">{{info.trendList && info.trendList.assessment && info.trendList.assessment[0]}}</td>
						<td></td>
					</template>
				</tr>
			</table>

			<view class="decode">
				您的中医体质评估结果：{{info.trendList && info.trendList && info.trendList.newResult}}
			</view>
		</div>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default{
		props:{
			info:{
				type: Object,
				default:function(){
					return {}
				}
			},
		},
		data() {
			return {
				base64: ''
			}
		},
		methods:{
			toImg(dom) {
				var dom = document.querySelector('#screenshot') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.modular {
		position: fixed;
		width: 1032px !important;
		height: 1566px !important;
		margin: 0 auto;
		top: -10000px;
		// top:10px;
		.title {
			color: #00B25C;
			font-size: 48px;
			font-weight: bold;
			margin-top: 54px;
			display: block;
		}
		
		table {
			width: 1032px;
			margin-top: 42px;
			border-spacing: 0;
			tr{
				width: 1032px;
				display: flex;
				box-sizing: border-box;
				border-bottom: 1px solid #06C17D;
				border-left: 1px solid #06C17D;
				background-color: #F6FFFB;
				td {
					height: 46px;
					line-height: 46px;
					color: #00C481;
					font-size: 22px;
					border-right: 1px solid #06C17D;
					width: 165px;
				}
				td:nth-child(1) {
					padding-left:26upx;
				}
				td:nth-child(2),td:nth-child(3) {
					width: 364px;
					view {
						display: flex;
						text {
							flex: 1;
							padding-left: 20px;
							border-right: 1px solid #06C17D;
						}
						text:nth-child(2) {
							text-align: center;
							padding: 0;
						}
						text:last-child {
							border: none;
						}
						.orange {
							color: #FF9600;
						}
						.red {
							color: #EB0000;
						}
					}
				}
				td:last-child {
					width: 133px;
					text-align: center;
				}
			}
			tr:nth-child(odd) {
				background-color: #E2FBEF;
			}
			tr:nth-child(1) {
				border: none;
				td {
					color: #FFFFFF;
					font-size: 28upx;
					width: 164px;
					height: 92px;
					line-height: 92px;
					border-radius: 8px 8px 0px 0px;
					text-align: left;
					background: #00C481;
					border-right: 1px solid #FFFFFF;
					font-size: 23px;
				}
				td:nth-child(1) {
					padding-left:28upx;
				}
				td:nth-child(2),td:nth-child(3) {
					width: 364px;
					view:first-child {
						border-bottom: 1px solid #FFFFFF;
						height: 46px;
						line-height: 46px;
						padding-left: 17px;
					}
					view:last-child {
						display: flex;
						height: 46px;
						line-height: 46px;
						text {
							flex: 1;
						}
					}
				}
				td:last-child {
					width: 133px;
					text-align: center;
				}
			}
			tr:nth-last-child(2) {
				border-bottom: none;
			}
			tr:last-child {
				font-weight: bold;
				td:nth-child(2),td:nth-child(3) {
					padding-left: 20px;
					width: 343px;
				}
			}
		}

		.decode{
			margin-top: 37px;
			h2{
				font-size: 26px;
				color: #00C481;
				margin-bottom: 20px;
			}
			font-size: 24px;
			color: #00C481;
		}
	}
</style>
